<template>
	<view>
		<view class="vip_top">
			<view class="vip_top_title">
				<view class="title_txt">
					开通绿卡会员平均可省999元
				</view>
			</view>
		</view>
		<view class="vip_privilege_box">
			<view class="privilege_title">
				VIP特权
			</view>
			<view class="privilege_list_box">
				<view class="privilege_item_box">
					<view class="privilege_icon_box icon iconfont iconyouhui">

					</view>
					<view class="privilege_title_name">
						专享券
					</view>
					<view class="privilege_name">
						天天可领
					</view>
				</view>
				<view class="privilege_item_box">
					<view class="privilege_icon_box icon iconfont icontequan">

					</view>
					<view class="privilege_title_name">
						专享特权
					</view>
					<view class="privilege_name">
						每周一更新
					</view>
				</view>
				<view class="privilege_item_box">
					<view class="privilege_icon_box icon iconfont iconjifen">

					</view>
					<view class="privilege_title_name">
						两倍积分
					</view>
					<view class="privilege_name">
						积分可提现
					</view>
				</view>
				<view class="privilege_item_box">
					<view class="privilege_icon_box icon iconfont icongengduo">

					</view>
					<view class="privilege_title_name">
						更多特权
					</view>
					<view class="privilege_name">
						敬请期待
					</view>
				</view>


			</view>
			<view class="privilege_btn">
				1折开通VIP
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.vip_privilege_box {
		.privilege_btn {
			width: 250px;
			height: 46px;
			background: #364153;
			color: #34b364;
			text-align: center;
			line-height: 46px;
			font-size: 15px;
			border-radius: 24px;
			margin: 0 auto;
		}

		// padding: 32upx;
		width: 100%;
		height: auto;
		padding: 16px 15px 19px 15px;
		box-sizing: border-box;
		background: #fff;

		.privilege_list_box {
			width: 100%;
			display: flex;
			-webkit-justify-content: space-around;
			justify-content: space-around;
			margin-bottom: 36px;
			background-color: white;

			.privilege_title_name {
				width: 100%;
				height: 18px;
				line-height: 18px;
				font-size: 12px;
				color: #2c2c2c;
				text-align: center;
			}

			.privilege_item_box {
				width: 60px;
				height: auto;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				.privilege_icon_box {
					font-size: 36upx;
				}

				.privilege_name {
					width: 100%;
					height: 30upx;
					line-height: 30upx;
					font-size: 10px;
					color: #8b8b8b;
					text-align: center;
				}

				.privilege_icon_box {
					width: 39px;
					height: 39px;
					border-radius: 50%;
					border: 1px solid #1e1e1e;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 5px;

				}
			}

		}

		.privilege_title {
			width: 100%;
			height: 26px;
			line-height: 26px;
			font-size: 17px;
			color: #383940;
			font-weight: 700;
			margin-bottom: 13px;
		}
	}

	.vip_top {
		width: 100%;
		height: 110px;
		background: #1d2434;
		// padding: 15px;
		padding-top: 46upx;
		box-sizing: border-box;

		.vip_top_title {
			width: 90%;
			margin: 0 auto;
			height: 100%;
			background-color: #33e97b;
			border-top: 2px solid #d3dc8e;
			border-left: 2px solid #d3dc8e;
			border-right: 2px solid #d3dc8e;
			border-radius: 10px 10px 0px 0;
			text-align: center;
			line-height: 88px;
			font-size: 15px;
		}
	}
</style>
